Vue Js datepicker disable future dates:To disable future dates in a Vue.js datepicker using the max attribute, you can set the max attribute value to the current date. This restricts the user from selecting any date beyond the current date. By dynamically setting the max attribute in the datepicker component to the current date, you ensure that the user can only choose dates up to the present day, effectively disabling any future dates. This functionality helps enforce date selection within a specific range and prevents users from selecting dates that have not yet occurred

How can I disable future dates in a Vue js datepicker?

The given code snippet demonstrates how to disable future dates in a Vue.js datepicker. The max attribute is used to set the maximum allowed date in the input field.

In the code, a Vue instance is created with an input element of type “date” bound to the selectedDate property using v-model. The maxDate computed property is defined to dynamically calculate the maximum date allowed.

Within maxDate, a new Date object is created to represent the current date, which is then converted to an ISO string and split to extract only the date part. Finally, the computed property returns this date string, effectively disabling all future dates in the datepicker.

Vue Js datepicker disable future dates Example

 <div id="app">
    <input type="date" v-model="selectedDate" :max="maxDate" />
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          selectedDate: null
        };
      },
      computed: {
        maxDate() {
          const today = new Date().toISOString().split("T")[0];
          return today;
        }
      }
    });
  </script>

Output of Vue Js datepicker disable future dates